import "./index.scss"
import React, { Component } from 'react';
import {Button,Row,Col,Image,Carousel} from "antd"
import { ajax } from '../../api';
import * as echarts from 'echarts';
import userlist from "../../mobx/userlist";
import moment from "moment"
import { sexList } from "../../utils";



class Home extends Component {

    state = {
        banner :[
            {
                imgUrl:require("../../assets/images/lunbo1.jpg").default,   
                id:""
            },
            {
                imgUrl: require("../../assets/images/lunbo2.jpg").default,
               
                id:""
            },
            {
                imgUrl:require("../../assets/images/lunbo3.jpg").default,
                
                id:""
            },
            {
                imgUrl:require("../../assets/images/lunbo4.jpg").default,
                
                id:""
            },
            {
                imgUrl:require("../../assets/images/lunbo5.jpg").default,
              
                id:""
            }
        ],
        current:0,
        Leixing :[]
    }
      
    componentDidMount(){

        ajax.getuserlist().then(res=>{
            
            var Role = []
            res.result.map((item)=>{
                Role.push(item.role ) 
                })
                var a = Role.filter(item=>item=="0").length
                var b = Role.filter(item=>item=="1").length
                var c = Role.filter(item=>item=="2").length
                this.chartInit1(a,b,c)           
        })

        ajax.getuserlist().then(res=>{       
            var Sex = []
            res.result.map((item)=>{
                Sex.push(item.sex ) 
                })
                var d = Sex.filter(item=>item=="0").length
                var e = Sex.filter(item=>item=="1").length
                var f = Sex.filter(item=>item=="2").length
                this.chartInit(d,e,f)         
        })

        ajax.getchelist().then(res=>{
            if(res.code==200){
                this.setState({
                    Leixing:res.result.slice(0,5)
                })
            }
        })
        
    }   

    chartInit1=(a,b,c)=>{
        var myChart = echarts.init(document.getElementById('mainchart1'));

        var option = {
            title: {
                text: '员工占比',
                subtext: '人数比例',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: a, name: '普通员工'},
                        {value: b, name: '前台'},
                        {value: c, name: '老板'},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }

    chartInit=(d,e,f)=>{
        var myChart = echarts.init(document.getElementById('mainchart'));

        var option = {
            title: {
                text: '男女占比',
                subtext: '男女比例',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: d, name: '保密'},
                        {value: e, name: '男'},
                        {value: f, name: '女'},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }

    gotogongzo=(item)=>{
        this.props.history.push("/main/anno/gong/?aid="+item._id)
    }

    render() {
        const {Leixing} = this.state
        return (
            <div>
                <div style={{width:'100%',padding:30}}> 
                <Carousel afterChange={this.onChange} autoplay={true} >
                    {
                        this.state.banner.map((item,i)=>{
                            return (
                                <img
                                    className="home-img"
                                    key={i}
                                    
                                    src={item.imgUrl}
                                    style={{width:'100%',height:260}}
                               />

                                
                            )
                        })
                    }
                </Carousel>
                <p className="home-title">
                    {this.state.banner[this.state.current].title}
                </p>
            </div>

            <div style={{width:'100%',padding:"0 30px"}}>
                <Row>
                    <Col span={7}>
                    <div className="active" style={{border:"1px solid #e7eaec"}}>
                        
                            <div style={{height:300,padding:20}} id="mainchart1" ></div>
                                         
                        </div>
                    </Col>

                    <Col span={7}  offset={2} >
                    <div  className="active" style={{border:"1px solid #e7eaec"}}>
                           
                            <div style={{height:300,padding:20}} id="mainchart" ></div>      
                        </div>
                    </Col>

                    <Col span={6} offset={2}>
                    <ul  className="active" style={{border:" 1px solid #cccccc",height:302}}>
                        <li style={{textAlign:"center",fontSize:"22px",fontWeight:"600",padding:"10px 0"}}>
                            最近维修车辆
                        </li>
                        {
                            Leixing.length>0 && Leixing.map((item,i)=>{
                                return(
                                    <li style={{color:"rgb(62 137 153 / 85%)",cursor:"pointer"}} key={i} onClick={()=>this.gotogongzo(item)}>
                                        <div className="chexing">
                                                <span>{i+1}</span>
                                                <span style={{width:100}}>{item.leixing}</span>
                                                <span>{sexList[item.fangshi].name}</span>
                                                <span>{moment(item.time).format("YYYY-MM-DD")}</span>
                                        </div>
                                    </li>
                                )
                            }) 
                        }
                    </ul>
                    </Col>
                </Row>
            </div>
            </div>
        );
    }
}

export default Home;